<template>
  <div>
    <van-nav-bar title="充值" left-arrow left-text="返回" />
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in list"
          clickable
          :key="item"
          :title="`${item}`"
          @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox :name="item" ref="checkboxes" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-cell-group>
        <van-field type="number" label="充值金额" placeholder="请输入" v-model="price"/>
    </van-cell-group>
    <van-button type="primary" block>下一步</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["房租", "水费", "电费", "网费"],
      result: [],
      price:""
    };
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
  },
};
</script>

<style lang="less" scoped>
</style>